{% extends "./layout.html" %}

{% block css %}
<link rel="stylesheet" href="/css/phone/home.css">
<link rel="stylesheet" href="/css/swiper.min.css">

{% endblock %}


{% block content %}
<div class="header">
    <img src="/img/phone/Magnifier.png" alt="" />
    <input type="text" placeholder="输入搜索内容" id="search_input" />
</div>
<div class="banner">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="/img/phone/1.jpg">
            </div>
            <div class="swiper-slide">
                <img src="/img/phone/2.jpg">
            </div>
            <div class="swiper-slide">
                <img src="/img/phone/3.jpg">
            </div>
        </div>
        <div class="swiper-pagination"></div>
    </div>
</div>
<div class="content">
    <div class="data">
        <div class="title">
            <h2>精选手册</h2>
            <a class="more" href="/book">查看更多 ></a>
        </div>
        <div class="list">
            {% for item in bookList %}
            <a class="data_list" href="/book/{{item.id}}">
                <div class="datapic">
                    <img src="{{item.img}}" alt="">
                </div>
                <div class="introduce">
                    <h3 class="bookname">{{item.title}}</h3>
                    <p class="bookoutline">{{item.updatedAt | dateformate}}</p>
                </div>
                <span class="jump"><span class="enter">进入</span></span>
            </a>
            {% endfor %}
        </div>
        <div class="title">
            <h2>精选博客</h2>
            <a class="more" href="/blog">查看更多 ></a>
        </div>

        <div class="list">
            {% for item in blogList %}
            <a class="data_list" href="/blog/{{item.id}}">
                <div class="datapic">
                    <img src="{{item.img}}" alt="">
                </div>
                <div class="introduce">
                    <h3 class="bookname">{{item.title}}</h3>
                    <p class="bookoutline">{{item.updatedAt | dateformate}}</p>
                </div>
                <span class="jump" href="/blog/{{item.id}}"><span class="enter">进入</span></span>
            </a>
            {% endfor %}
        </div>
        <div class="title">
            <h2>精选视频</h2>
            <a class="more" href="/video">查看更多 ></a>
        </div>

        <div class="list">
            {% for item in videoList %}
            <a class="data_list" href="/video/{{item.id}}">
                <div class="datapic">
                    <img src="{{item.img}}" alt="">
                </div>
                <div class="introduce">
                    <h3 class="bookname">{{item.title}}</h3>
                    <p class="bookoutline">{{item.updatedAt | dateformate}}</p>
                </div>
                <span class="jump"><span class="enter">进入</span></span>
            </a>
            {% endfor %}
        </div>
    </div>
    <div class="powerby">
        {% include "./powerby.html" ignore missing %}
    </div>

</div>
<div class="menu_container">
    {% include "./menu.html" ignore missing %}
</div>


{% endblock %}

{% block js %}
<script src="/js/swiper.min.js"></script>
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: {
            delay: 2000,//1秒切换一次
        },
        loop : true,
        pagination: {
            el: '.swiper-pagination',
            dynamicBullets: true,
            
        },
    });
</script>
{% endblock %}